<template>
    <div>
        <div>

            <el-table
                    :data="articleList"
                    border
                    @row-click="columnListener"
                    style="width: 100%"
                    :row-key="articleList.aid"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column prop="aid" label="_id" width="100">
                </el-table-column>
                <el-table-column prop="title" label="标题" width="150">
                </el-table-column>
                <el-table-column prop="content" label="内容" width="300">
                </el-table-column>
                <el-table-column prop="classification" label="分类" width="100">
                </el-table-column>
                <el-table-column prop="label" label="标签" width="100">
                </el-table-column>
                <el-table-column prop="releaseTime" label="发布时间" width="200">

                </el-table-column>
                <el-table-column prop="updateTime" label="更新时间" width="200">
                </el-table-column>
                <el-table-column prop="browseTheNumber" label="浏览数量" width="100">

                </el-table-column>
                <el-table-column prop="thumbUpNumber" label="点赞数量" width="100">
                </el-table-column>

                <el-table-column prop="status" label="状态" :formatter="formatter" width="100">
                </el-table-column>

                <el-table-column fixed="right" label="操作" width="160">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="btn_change(1)">编辑</el-button>
                        <el-button type="text" size="small" @click="btn_change(2)">改变状态</el-button>
                        <el-button type="text" size="small" @click="btn_change(3)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div style="margin-top: 2%;display: flex">
            <div style="flex: 1">
                <h3>试着批量操作?</h3>
                <el-button type="text" size="small" @click=btn_batch(0)>移出废纸篓</el-button>
                <el-button type="text" size="small" style="margin-left: 3%" @click=btn_batch(1)>删除</el-button>
                <p style="font-size: 10px">ps: 这里的丢到废纸篓,将会忽视你勾选的文章状态,统一丢到废纸篓</p>
            </div>
            <div style="flex: 1;margin-top: 1%">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        @prev-click="previous"
                        @next-click="nextPage"
                        @current-change="numberOfPagesChanged"
                        :page-count="pages"
                        :current-page="current"
                        :page-size="size"
                        :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    let that;
    export default {
        name: "WasteBasket",
        data() {
            return {
                articleList: [],
                pages: 0,
                total: 0,
                current: 0,
                size: 0,
                checkedArticles: [],//选中的文章
                flag: 0,//这个用于判断来干嘛


                flag1: -1//用于删除文章提示
            }
        },

        mounted() {
            that = this;
            that.$Axios(that.$store).post(that.ARTICLE_API + "/waste_basket/" + 0)
                .then(function (result) {
                    let data = result.data.data;
                    that.articleList = data.records;
                    that.pages = data.pages;
                    that.total = data.total;
                    that.current = data.current;
                    that.size = data.size;
                });
        },

        methods: {
            btn_batch(e) {
                let json = [];
                that.checkedArticles.forEach(o => {
                    json.push(o.aid)
                });
                if (e === 0) {
                    //    批量移出废纸篓
                    that.$Axios(that.$store).post(that.ARTICLE_API + "/remove_the_trash", json)
                        .then(function (result) {
                            that.$router.go(0);
                        });
                } else if (e === 1) {
                    //    批量删除
                    if (that.flag1 === -1) {
                        that.$notify({
                            title: '警告',
                            message: '当前操作不可逆,确认后请再次点击删除',
                            type: 'warning'
                        });
                        that.flag1 = -2;
                    } else if (that.flag1 === -2) {
                        that.$Axios(that.$store).post(that.ARTICLE_API + "/delete", json)
                            .then(function (result) {
                                that.$router.go(0);
                            });
                        that.flag1 = -1;

                    }

                }

            },
            //格式化数据
            formatter(row, column) {
                if (row.status === 1) {
                    return '发布';
                } else if (row.status === 0) {
                    return '废纸篓';
                }
            },
            //这里面对列进行了所有的操作
            columnListener(row, event, column) {
                if (that.flag === 0) {
                    console.log("正常")
                } else if (that.flag === 1) {
                    that.$router.push({
                        path: '/index/WriteAnEssay',
                        query: {
                            aid: row.aid
                        }
                    })
                } else if (that.flag === 2) {
                    that.$Axios(that.$store).post(that.ARTICLE_API + "/change_state/" + row.aid)
                        .then(function (result) {
                            that.$router.go(0);
                        });
                } else if (that.flag === 3) {

                    if (that.flag1 !== row.aid) {
                        that.$notify({
                            title: '警告',
                            message: '当前操作不可逆,确认后请再次点击删除',
                            type: 'warning'
                        });
                        that.flag1 = row.aid;
                    } else {
                        that.flag = -1;
                        let json = [
                            row.aid
                        ];
                        // let s = JSON.stringify(json);
                        // console.log(s);
                        that.$Axios(that.$store).post(that.ARTICLE_API + "/delete", json)
                            .then(function (result) {

                                that.$router.go(0);
                            });

                    }

                }
            },

            btn_change(e) {
                that.flag = e;
            },
            handleSelectionChange(val) {
                that.checkedArticles = val;
            },
            //上一页
            previous(e) {
            },
            //下一页
            nextPage(e) {
            },
            numberOfPagesChanged(e) {
                that.$Axios(that.$store).get(that.ARTICLE_API + "/list/" + e)
                    .then(function (result) {
                        let data = result.data.data;
                        that.articleList = data.records;
                        that.pages = data.pages;
                        that.total = data.total;
                        that.current = data.current;
                        that.size = data.size;
                    });
            },
            handleClick(row) {
                console.log(row);
            }
        },
    }
</script>

<style scoped src="../../../static/md/markdown.css">

</style>